<dom-module id="demo-selection-panel2">
  <style>
    :host {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      flex-direction: column;
    }
    li {
      cursor: pointer;
      padding: 5px;
      margin: 1px;
      list-style-type: none;
    }
    ul li:hover {
      background: #555;
    }
    ul li[selected] {
      background: #09f;
    }
    ul li[hover] {
      background: #f90;
    }

    p#instruction {
      display: block;
      padding: 15px;
    }
  </style>

  <template>
    <p id='instruction'>This package opens two panels, you can multi-select items in list, and your selection will be reflected in the other panel.</p>
    <ul>
      <template is="dom-repeat" items="{{list}}" id="list">
        <li on-click="_onSelect"
          hover$="{{item.hover}}"
          selected$="{{item.selected}}"><span>{{item.name}}</span>
        </li>
      </template>
    </ul>
  </template>

  <script>
    Editor.polymerPanel( 'demo-selection.2', {
      messages: {
        'selection:changed': function ( event, type ) {
          this.syncSelection(type);
        },

        'selection:hoverin': function ( event, type, name ) {
          var idx = -1;
          for ( var i = 0; i < this.list.length; ++i ) {
            if ( this.list[i].name === name ) {
              idx = i;
              break;
            }
          }
          if ( idx !== -1 ) {
            var item = this.$.list.indexForElement(idx);
            this.set('list.' + i + '.hover', true );
          }
        },

        'selection:hoverout': function ( event, type, name ) {
          var idx = -1;
          for ( var i = 0; i < this.list.length; ++i ) {
            if ( this.list[i].name === name ) {
              idx = i;
              break;
            }
          }
          if ( idx !== -1 ) {
            var item = this.$.list.indexForElement(idx);
            this.set('list.' + i + '.hover', false );
          }
        },
      },

      ready: function () {
        this.list = [
          'extrajudicially',
          'duse',
          'appleton',
          'aborning',
          'evacuee',
          'impecunious',
          'overrude',
          'subrange',
          'hamlet',
          'subtranslucency',
        ].map( function ( item ) {
          return { name: item, hover: false, selected: false };
        });
      },

      attached: function () {
        this.syncSelection('normal');
      },

      _onSelect: function ( event ) {
        var model = event.model;
        // model.set( 'item.selected', !model.item.selected );
        Editor.Selection.select( 'normal', model.item.name, true, true );
      },

      syncSelection: function ( type ) {
        var selection = Editor.Selection.curSelection(type);

        for ( var i = 0; i < this.list.length; ++i ) {
          var item = this.list[i];
          this.set('list.' + i + '.selected', selection.indexOf(item.name) !== -1 );
        }
      },
    });
  </script>
</dom-module>
